

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

//测试状态管理
class MyAppState extends StatelessWidget{

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: "Flutter Demo",
      theme: ThemeData(primaryColor: Colors.blue),
      home: ParentWidgetC(),
    );
  }
}

 class TapboxA extends StatefulWidget{

   TapboxA({Key? key}) : super(key: key);
   @override
   _TapboxAState createState() => _TapboxAState();

 }

 //自己管理自己的状态
 class _TapboxAState extends State<TapboxA>{

   bool _active = false;

   void _handleTap(){
     setState(() {
         _active = !_active;
     });
   }

   Widget build(BuildContext context) {
     return GestureDetector(
       onTap: _handleTap,
       child: Container(
         child: Center(
           child: Text(
             _active ? 'Active' : 'Inactive',
             style: const TextStyle(fontSize: 32.0, color: Colors.white),
           ),
         ),
         width: 200.0,
         height: 200.0,
         decoration: BoxDecoration(
           color: _active ? Colors.lightGreen[700] : Colors.grey[600],
         ),
       ),
     );
   }
 }

 //父widget管理状态子widget状态
 class ParentWidget extends StatefulWidget{

  @override
  _ParentWidgetState createState() => _ParentWidgetState();

 }

 class _ParentWidgetState extends State<ParentWidget>{

   bool active =false;

  @override
  Widget build(BuildContext context) => TapboxB(active: active,onChanged: onChanged,);

   void  onChanged(bool newValue){
      setState(() {
        active = newValue;
      });
   }
 }

class  TapboxB  extends StatelessWidget{

  TapboxB({Key? key, this.active: false, required this.onChanged})
      : super(key: key);

  final bool active;
  final ValueChanged<bool> onChanged;

  void _handleTap() {
    onChanged(!active);
  }

  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: _handleTap,
      child: Container(
        child: Center(
          child: Text(
            active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: active ? Colors.lightGreen[700] : Colors.grey[600],
        ),
      ),
    );
  }
 }

//混合管理状态
class ParentWidgetC  extends StatefulWidget{

  @override
  _ParentWidgetCState  createState() => _ParentWidgetCState();

}

class _ParentWidgetCState extends State{

  bool _active = false;
  void _handleTapboxChanged(bool newValue) {
    setState(() {
      _active = newValue;
    });
  }
  @override
  Widget build(BuildContext context) {

    return Container(
      child: TapboxC(
        active: _active,
        onChanged: _handleTapboxChanged,
      ),
    );
  }
}

class TapboxC extends StatefulWidget{

     bool active;
    final ValueChanged<bool> onChanged;

   TapboxC({Key? key, this.active =false, required this.onChanged}):super(key: key);

  @override
  State<StatefulWidget> createState() =>TapboxCState();


}


class TapboxCState extends State<TapboxC>{

  bool _highlight = false;

  void _handleTapDown(TapDownDetails details) {
    setState(() {
      _highlight = true;
    });
  }

  void _handleTapUp(TapUpDetails details) {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTapCancel() {
    setState(() {
      _highlight = false;
    });
  }

  void _handleTap() {
    widget.onChanged(!widget.active);
  }

  @override
  Widget build(BuildContext context) {
    // 在按下时添加绿色边框，当抬起时，取消高亮
    return GestureDetector(
      onTapDown: _handleTapDown, // 处理按下事件
      onTapUp: _handleTapUp, // 处理抬起事件
      onTap: _handleTap,
      onTapCancel: _handleTapCancel,
      child: Container(
        child: Center(
          child: Text(
            widget.active ? 'Active' : 'Inactive',
            style: const TextStyle(fontSize: 32.0, color: Colors.white),
          ),
        ),
        width: 200.0,
        height: 200.0,
        decoration: BoxDecoration(
          color: widget.active ? Colors.lightGreen[700] : Colors.grey[600],
          border: _highlight
              ? Border.all(
            color: (Colors.teal[700])!,
            width: 10.0,
          )
              : null,
        ),
      ),
    );
  }
}







